I implemented this code by using javascript to check how this works in arrow function.
variable = 'Global variable';
function normalFunc () {
console.log(this.variable);
}
const arrowFunc = () => {
console.log(this.variable);
};
const objNormal = {
variable: 'Inner variable',
func: normalFunc
};
const objArrow = {
variable: 'Inner variable',
func: arrowFunc
};
objNormal.func();
objArrow.func();
arrowFunc();
I learned that this refers to global object in arrow function, so i expected the output like this👇
Inner variable
Global variable
Global variable
BUT the actual output was this...👇
Inner variable
undefined
undefined
Actually, it's really strange because this depends on where to run this code... in JS Fiddle, this refer to global object as i expected. But in my terminal and this playground site, this does not refer to global object.
Am i misunderstanding about this or just something is missing in my code?
Please help me to understand why this happens.
The website linked transpiles the JS code to be inside a function, so this is not window. If you change your first line to be
this.variable = 'Global variable';
the code works as expected.
When this is pasted into a .js file (filename.js) and ran with node (node filename.js), the this keyword is an empty object while global is a completely different thing. This is different from running this code in the REPL mode, where this === global.
In both cases, when you just say variable = 'Global variable';, you're assigning to window.variable or global.variable, so you can't access it with this.variable.